<template>
  <div class="app">
    <el-row :gutter="5" class="content">
      <el-col :span="18">
        <el-card class="box-card">
          <div slot="header" class="title">评价列表</div>
          <div v-for="(record, index) in subjects" :key="index">
            <h3>{{ index + 1 }}. {{ record.title }}</h3>
            <div v-if="record.type === 5">
              <textarea
                v-html="record.txt"
                v-model="record.txt"
                class="custom-textarea"
                rows="5"
                readonly
              ></textarea>
            </div>
            <div v-else>
              <div class="rating-wrap">
                <div v-for="i in 10" :key="i">
                  <span v-if="i === 1">非常不满意</span>
                  <span v-if="i === 10">非常满意</span>
                </div>
              </div>
              <div
                class="rating"
                :style="{
                  background:
                    'linear-gradient(to right, #007bff ' +
                    currentRating * 10 +
                    '%, #b8daff ' +
                    currentRating * 10 +
                    '%)'
                }"
              >
                <div
                  v-for="i in 10"
                  :key="i"
                  :style="{ background: i <= record.score ? '#007bff' : '#b8daff' }"
                >
                  {{ i }}
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="title">评估详情</div>
          <div>
            <div class="detail">{{ surveyName }}</div>
            <div>
              <el-button-group>
                <el-button size="small" type="danger" @click="back">返回上级</el-button>
              </el-button-group>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { BizEvluateRecordController } from '@/api';
export default {
  name: 'EvluatResulteView',
  data() {
    return {
      currentRating: 0,
      sceneType: null,
      moduleType: null,
      personnelType: null,
      subjects: [],
      surveyId: null,
      surveyName: null
    };
  },
  methods: {
    back() {
      if (this.moduleType === 2) {
        this.$router.replace({
          name: 'frontScene',
          query: { sceneType: this.sceneType, personnelType: this.personnelType }
        });
      } else if (this.moduleType === 5) {
        this.$router.replace({
          name: 'course',
          query: { sceneType: this.sceneType, personnelType: this.personnelType }
        });
      }
    },
    getRecords() {
      let params = {
        moduleType: 5,
        personnelType: this.personnelType
      };
      BizEvluateRecordController.exist(this, params)
        .then(res => {
          if (res.data) {
            this.surveyName = res.data.surveyName;
            this.surveyId = res.data.surveyId;
            this.subjects = res.data.records;
          }
        })
        .catch(e => {
          console.error(e);
        });
    }
  },
  mounted() {
    const sceneType = this.$route.query.sceneType;
    this.sceneType = sceneType;
    const moduleType = this.$route.query.moduleType;
    this.moduleType = moduleType;
    const personnelType = this.$route.query.personnelType;
    this.personnelType = personnelType;
    this.getRecords();
  }
};
</script>

<style scoped>
.app {
  height: 100vh;
  padding: 35px;
}

.app .content {
  width: 100%;
  height: 95vh;
}

.app .content .box-card {
  width: 100%;
  height: 95vh;
  overflow-y: auto;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.title {
  height: 30px;
  font-size: 16px;
  line-height: 30px;
}
.detail {
  height: 30px;
  font-size: 16px;
  font-style: italic;
  font-weight: bolder;
}
/deep/ .el-radio__label {
  white-space: normal; /* 换行 */
}

/deep/ .el-checkbox__label {
  white-space: normal; /* 换行 */
}
.rating {
  display: flex;
  align-items: center;
}

.rating div {
  padding: 5px;
  cursor: pointer;
  color: white;
  text-align: center;
  flex: 1;
  transition: background 0.3s;
}
.rating-wrap {
  display: flex;
  align-items: center;
}

.rating-wrap > div {
  padding: 5px;
  color: black;
  text-align: center;
  flex: 1;
  transition: background 0.3s;
}
.custom-textarea {
  resize: none; /* 禁止拉伸 */
  border: 1px solid #ccc; /* 边框颜色为灰色 */
  border-radius: 5px; /* 圆角 */
  padding: 10px; /* 设置内边距 */
  width: 100%; /* 设置宽度 */
  height: auto; /* 设置高度自适应 */
}
</style>
